<template>
  <div class="p-4">
    <Card title="统计" v-bind="$attrs">
<!--      <template #extra>-->
<!--        <div style="display: flex; justify-items: center">-->
<!--          <Calendar-->
<!--            v-show="!activeDayBtn"-->
<!--            style="margin-left: 15px; width: 100%"-->
<!--            :fullscreen="false"-->
<!--            @panelChange="onPanelChange"-->
<!--            valueFormat="YYYY-MM"-->
<!--          />-->
<!--          <div style="width: 100%" v-if="activeDayBtn"> </div>-->
<!--          <div v-show="activeDayBtn" style="line-height: 48px">-->
<!--            <RangePicker-->
<!--              v-model:value="dateRangeValue"-->
<!--              valueFormat="YYYY-MM-DD"-->
<!--              size="small"-->
<!--              @change="dateRangeChange"-->
<!--            ></RangePicker>-->
<!--          </div>-->

<!--          <div style="line-height: 48px; cursor: pointer" :class="{ 'active-day': activeDayBtn }"-->
<!--            ><span style="padding: 8px" @click="dayClickFn">天</span></div-->
<!--          >-->
<!--        </div>-->
<!--      </template>-->
      <!--    四张卡片-->
      <GrowCard
        :loading="loading"
        class="enter-y"
        :dateStr="dateObj.value"
        :dateType="dateObj.mode"
        :dateRangeValue="dateRangeValue"
        ref="myCard"
      />
    </Card>

    <!--    趋势图-->
    <!--    <SiteAnalysis class="!my-4 enter-y" :loading="loading" />-->

    <!--    最近动态-->
<!--    <DynamicInfo :loading="loading" class="!my-4 enter-y" />-->

<!--    &lt;!&ndash;    饼图&ndash;&gt;-->
<!--    <div class="md:flex enter-y">-->

<!--      <SalesProductPie class="w-full" :loading="loading" />-->
<!--    </div>-->
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import GrowCard from './components/GrowCard.vue';
  import SiteAnalysis from './components/SiteAnalysis.vue';
  import VisitSource from './components/VisitSource.vue';
  import VisitRadar from './components/VisitRadar.vue';
  import SalesProductPie from './components/SalesProductPie.vue';
  import DynamicInfo from '../workbench/components/DynamicInfo.vue';
  import { Card, Tabs, Calendar, RangePicker } from 'ant-design-vue';

  const loading = ref(true);
  const dateObj = ref({});
  const myCard = ref();
  const activeKey = ref('1');

  const activeDayBtn = ref(false);
  const dateRangeValue = ref([]);
  function tabChange(e) {}
  function dateRangeChange(e) {
    console.log('---dateRangeChange', e);
  }
  function dayClickFn() {
    activeDayBtn.value = !activeDayBtn.value;
    if (!activeDayBtn.value) {
      dateRangeValue.value = [];
    }
  }
  function onPanelChange(value, mode) {
    let obj = { value, mode };
    dateObj.value = obj;
    console.log('---obj:', obj);
    // myCard.value.change(obj)
  }

  setTimeout(() => {
    loading.value = false;
  }, 1500);
</script>
<style lang="less">
  .ant-card-head {
    .ant-card-extra {
      width: 100%;
    }

    .ant-picker-panel {
      display: none;
    }
    .active-day {
      color: #004496;
    }
  }
</style>
